<template>
    <div class="address">
        <el-select v-model="address.province" placeholder="请选择省份">
            <el-option
                    v-for="(item,index) in provinceList"
                    :label="item.name"
                    :value="item"
                    :key="index">
                <span style="float: left">{{ item.name }}</span>
                <span style="float: right; color: #8492a6; font-size: 13px">{{ item.ProRemark }}</span>
            </el-option>
        </el-select>
        <el-select v-show="address.province" v-model="address.city" placeholder="请选择城市">
            <el-option
                    v-for="(item,index) in cityList"
                    :label="item.name"
                    :value="item"
                    :key="index">
                <span style="float: left">{{ item.name }}</span>
            </el-option>
        </el-select>
        <el-select  v-show="address.city" v-model="address.area" placeholder="请选择区县">
            <el-option
                    v-for="(item,index) in areaList"
                    :label="item.DisName"
                    :value="item"
                    :key="index">
                <span style="float: left">{{ item.DisName }}</span>
            </el-option>
        </el-select>
        <el-input class="detail" v-model="address.detail" placeholder="请输入详细地址"></el-input>
    </div>
</template>
<script>
    import * as addressList from './addressList';
    export default {
        props:['addressInput'],
        data() {
            return {
                address:{
                    province:null,
                    city:null,
                    area:null,
                    detail:''
                },
                provinceList:addressList.province,
            }
        },
        watch:{
            addressInput(val){
                addressList.province.forEach(item => {
                    if(item.name === val.province){
                        this.address.province = item;
                    }
                });
                addressList.city.forEach(item => {
                    if(this.address.province.ProID === item.ProID && item.name === val.city){
                        this.address.city = item;
                    }
                });
                addressList.area.forEach(item => {
                    if(this.address.city.CityID === item.CityID && item.DisName === val.area){
                        this.address.area = item;
                    }
                });
                this.address.detail = val.detail;
            },
            address:{
                handler(val){

                    this.$emit('updateAddress',{
                        province:val.province ? val.province.name : "",
                        city:val.city ? val.city.name : "",
                        area:val.area ? val.area.DisName : "",
                        detail:val.detail
                    });
                },
                deep:true
            }
        },
        computed:{
//            address:{
//                get(){
//                    let obj = {};
//                    addressList.province.forEach(item => {
//                         if(item.name === this.addressInput.province){
//                             obj.province = item;
//                         }
//                    });
//                    addressList.city.forEach(item => {
//                        if(item.name === this.addressInput.city){
//                            obj.city = item;
//                        }
//                    });
//                    addressList.area.forEach(item => {
//                        if(item.DisName === this.addressInput.area){
//                            obj.area = item;
//                        }
//                    });
//                    obj.detail = this.addressInput.detail;
//                    console.log(obj);
//                    return obj;
//                },
//                set(newValue){
//                    this.$emit('updateAddress',{
//                        province:newValue.province ? newValue.province.name : "",
//                        city:newValue.city ? newValue.city.name : "",
//                        area:newValue.area ? newValue.area.DisName : "",
//                        detail:newValue.detail
//                    });
//                }
//            },
            cityList(){
                if(this.address.province){
                    let arr =[];
                    addressList.city.forEach(item => {
                        if(this.address.province.ProID === item.ProID) arr.push(item)
                    });
                    if(arr.length > 0)return arr;
                } else return null
            },
            areaList(){
                if(this.address.city){
                    let arr =[];
                    addressList.area.forEach(item => {
                        if(this.address.city.CityID === item.CityID) arr.push(item)
                    });
                    if(arr.length > 0)return arr;
                }else return null
            }
        }
    }
</script>
<style lang="stylus" rel="stylesheet/stylus" scoped>
    .address
        .detail
            padding-top:10px
</style>